<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Simple FreeGroup Draw2D 0.9.26 Demo</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <SCRIPT src='../../wz_jsgraphics.js'></SCRIPT>      <SCRIPT src='../../mootools.js'></SCRIPT>      <SCRIPT src='../../moocanvas.js'></SCRIPT>      <SCRIPT src='../../draw2d.js'></SCRIPT>


</head>
<body style="margin:0px;padding:0px;">
<!-- the main drawing area -->
<div id="paintarea" style="width:3000px;height:3000px" >

    <!-- The information help text -->
    <div class="stickyNote">
    <center><b>Draw2D 0.9.26 - A simple diagram drawing demo<br>
    by Andreas Herz (a.herz @ freegroup.de)
    <br>
    </b>
    <br>
    <div style="color:red;font-size:9pt">Focus of this example: Demonstration of the PropertyWindow.</div>
    </center>
    <br>
    <center>See more on <a href="http://www.draw2d.org">FreeGroup Draw2D 0.9.26</a></center>
    </div>


</div>
<script>
  // Create the interactiv canvas
  //
  var workflow  = new draw2d.Workflow("paintarea");

  // Add a simple PropertyDialog to the Canvas
  // This will display the properties of the current select object
  //
  var dialog = new draw2d.PropertyWindow();
  workflow.addFigure(dialog,100,100);

  // Add a Oval with a fill color to the paint area
  //
  var node1= new draw2d.Oval();
  node1.setDimension(100,40);
  node1.setBackgroundColor(new draw2d.Color(255,0,0));
  workflow.addFigure(node1,130,180);

  // add a simple line
  //
  var line= new draw2d.Line();
  line.setStartPoint(100,180);
  line.setEndPoint(130,300);
  workflow.addFigure(line);

  // add line with line width 5
  //
  var line= new draw2d.Line();
  line.setLineWidth(5);
  line.setColor(new draw2d.Color(255,0,120));
  line.setStartPoint(430,450);
  line.setEndPoint(230,550);
  workflow.addFigure(line);


  // Add a simple text label to the screen
  //
  workflow.addFigure(new draw2d.Label("See more on http://www.openjacob.org"),350,253);


  // Add a Label with a border 
  //
  var label = new draw2d.Label("Label with a Border");
  var border = new draw2d.LineBorder();
  border.setColor(new draw2d.Color(100,255,100));
  border.setLineWidth(4);
  label.setBorder(border);
  workflow.addFigure(label,80,400);


  // Add a Oval to the paint area
  //
  var node4 = new draw2d.Oval();
  node4.setDimension(100,40);
  workflow.addFigure(node4,300,350);


  // Add a Rectangle to the paint area
  //
  var rect = new draw2d.Rectangle();
  rect.setDimension(190,20);
  workflow.addFigure(rect,250,300);

  // Add a Rectangle with lineWidth and fillColor/backgroundColor
  //
  var rect = new draw2d.Rectangle();
  rect.setLineWidth(5);
  rect.setBackgroundColor(new draw2d.Color(255,120,0));
  rect.setDimension(190,20);
  workflow.addFigure(rect,350,320);

  window.onscroll=function(){workflow.onScroll();};

</script>
</body>
</html>
